<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D动画</title>
    <!-- css 3D利用GPU进行加速，动画能更加流畅，性能更高效 -->
    <!-- 相较于2D添加了一个Z轴，正值是接近屏幕，负值是远离屏幕 -->

    <!-- 透视，perspective：**px； 数值越小透视效果越强，父元素添加效果则，所有子元素都具有效果，可以单独给子元素添加效果 -->
    <!-- 注意，perspective必须作为transform的第一个元素，否则效果无效 -->

    <!-- 3D位移函数：TranslateZ()与translate3d()
    eg.transform:translate3d(x,y,z) trasnlateZ可实现视距，近大远小的视觉效果 -->
     
    <style>
        * {
            margin: 0%;
            padding: 0%;
            box-sizing: border-box;
        }

        html,body {
            width: 100%;
            height: 200%;
        }

        /* 3D旋转，rotateZ和二维里的rotate一样 */
        .box1 {
            margin: 10px auto;
            width: 150px;
            height: 150px;
            background-color: antiquewhite;
            transition: 1s;
        }

        .box1:hover {
            transform: rotateX(180deg);
        }

        .box2 {
            margin: 10px auto;
            width: 150px;
            height: 150px;
            background-color: antiquewhite;
            transition: 1s;
        }

        .box2:hover {
            transform: rotateY(180deg);
        }

        .box3 {
            margin: 10px auto;
            width: 150px;
            height: 150px;
            background-color: antiquewhite;
            transition: 1s;
        }

        .box3:hover {
            transform: rotateZ(180deg);
        }

        .box4 {
            margin: 10px auto;
            width: 100px;
            height: 100px;
            background-color: antiquewhite;
            transition: 1s;
        }

        .box4:hover {
            transform: perspective(500px) rotateX(180deg);
        }

        .box5 {
            margin: 20px auto;
            width: 300px;
            height: 300px;
            border: 1px solid blue;
            transition: all 1s;
            position: relative;
            transform: perspective(1000px); /* 透视距离，值越小立体感越强 */
            /* transform-style: preserve-3d; 关键：保持子元素3D空间 */
            cursor: pointer; /* 提示可交互 */
        }

        .box5 div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            backface-visibility: hidden; /* 关键：隐藏元素背面 */
            transition: transform 1s ease; /* 子元素单独过渡，更流畅 */
        }

        .box501 { /* 正面 */
            background-color: bisque;
        }

        .box502 { /* 背面：初始翻转隐藏 */
            background-color: aquamarine;
            transform: rotateY(-180deg); /* 初始沿Y轴翻转180度，背向观察者 */
        }

        /* hover时：正面翻走，背面翻来 */
        .box5:hover .box501 {
            transform: rotateY(180deg);
        }

        .box5:hover .box502 {
            transform: rotateY(0deg); /* 背面翻转回初始位置，面向观察者 */
        }

        .box {
            position: relative;
            width: 300px;
            height: 450px;
            border: 1px solid blue;
            margin: 100px auto;
            /* 添加透视效果 */
            perspective: 1000px;
            /* 关键：保持子元素3D空间 */
            transform-style: preserve-3d; 
        }

        .box>div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: pink;
            text-align: center;
            /* font-size: 30px;
            color: #fff; */
            line-height: 450px;
            transition: all .7s;
            /* 转到后面要隐藏盒子 */
            backface-visibility: hidden;
        }

        .box>div p {
            font-size: 30px;
            color: #fff;
            transform: translateZ(100px);
        }

        .box .front {
            z-index: 1;
        }

        .box:hover .front {
            transform: rotateY(-180deg);
        }

        .box .back {
            background-color: skyblue;
            transform: rotateY(180deg);
        }

        .box:hover .back {
            transform: rotateY(0deg);
        }
    </style>

</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5">
        <div class="box501"></div>
        <div class="box502"></div>
    </div>
    <div class="box">
        <div class="front"><p>正</p></div>
        <div class="back"><p>反</p></div>
    </div>
</body>
</html>